<!--
 * @Author: wangding
 * @Date: 2020-10-30 11:05:02
 * @LastEditTime: 2021-01-26 16:47:55
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\system\password\index.vue
-->
<template>
    <div class="password-main-box">
        <div class="search-box">
            <div class="search-box-sub">
                <span class="lable-text">{{$t('user.loginName')}}</span>
                <el-input style="width:160px;" v-model="loginName" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('user.userType')}}</span>
                <el-select v-model="userType" filterable :placeholder="$t('index.selectStates')" :clearable='true'>
                    <el-option
                    v-for="item in userTypeNameList"
                    :key="item.value"
                    :label="item.code"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('payConfirm.wifiSN')}}</span>
                <el-input v-big style="width:160px;" v-model="wifiSn" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <div class="search-box-sub">
                <el-button type="primary" @click='query'>{{$t('query')}}</el-button>
            </div>
        </div>
        <div class="button-box">
            <el-button type="primary" icon='el-i con-search' class="marginR10" @click="()=>{dialogVisible = true}">{{$t('login.standby_password_query')}}</el-button>
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe   :column='column' :select='false'>
            <template #userType="{data}">
                {{returnUserTypeName(data.userType)}}
            </template>
            <template #enableFlag="{data}">
                {{returnFlag(data.enableFlag)}}
            </template>
            <template #option="{data}">
                <div class="option-box">
                    <el-popconfirm
                            :confirm-button-text="$t('sure')"
                            :cancel-button-text="$t('cancel')"
                        :title="$t('user.reset_pwd_confirm')"
                        @confirm='userUpdatePwd(data.ids)'
                    >
                        <el-button class="marginR10" type="" slot="reference" icon='el-icon-key' :title="$t('js.reset_pwd')"></el-button>
                    </el-popconfirm>
                </div>
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
        <el-dialog
            :title="$t('login.standby_password_query')"
            :visible.sync="dialogVisible"
            width="700px"
            :before-close="()=>{dialogVisible = false}">
            <el-form ref="form" :model="form" label-width="165px" >
                <el-row :gutter="20">
                    <el-col :span="16" :offset="3">
                        <el-form-item :label="$t('payConfirm.wifiSN')" prop="wifiSn" :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <div class="flex-x-sub-box">
                                <el-input v-model="form.wifiSn" :placeholder="$t('pleaseInput')"></el-input>
                                <el-button style="margin-left:10px;"  @click='snGetPassword'>{{$t('query')}}</el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16" :offset="3">
                        <el-form-item :label="$t('devWifi.BackupPassword') + ':'">
                            <div>{{wifiSnPassword}}</div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import md5 from 'js-md5'
import baseTable from '../../../components/common/baseTable'
export default {
    components: {
        baseTable
    },
    props: {

    },
    data() {
        return {
            wifiSnPassword:'',
            dialogVisible:false,
            loginName:'',
            userType:'',
            wifiSn:'',
            userTypeNameList:[],
            size:10,
            current:1,
            total:1,
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('user.loginName'),
                value: 'loginName',
            },
            {
                title: this.$t('user.userType'),
                value: 'userType',
                slot: 'userType'
            },
            {
                title: this.$t('user.enableFlag'),
                value: 'enableFlag',
                slot: 'enableFlag'
            },{
                title: this.$t('control'),
                value: 'sid',
                slot: 'option'
            }],
            dictionaryBatch:{},
            form:{
                wifiSn:''
            }
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getDictionaryBatch()
        
        this.userSelectQueryUserType()
    },
    methods: {
        async snGetPassword(){
            let res = await this.API.snGetPassword({
                wifiSN:this.form.wifiSn
            })
            this.wifiSnPassword = res
        },
        async userUpdatePwd(id){
            let res = await this.API.userUpdatePwd({
                id:id,
                password:md5('123456')
            })
            if(res.success){
                this.$message({
                message: this.$t('user.default_pwd_prompt'),
                type: 'success'
                });
                this.query()
            }else{
                this.$message({
                message: this.$t('index.control_fail'),
                type: 'warning'
                });
            }

        },
        async userGetPage(){
            this.loading = true
            let res = await this.API.userGetPage({
                size: this.size,
                current: this.current,
                loginName: this.loginName,
                userType: this.userType,
                passwordUserTypeFlag: 0,
                wifiSn:this.wifiSn
            })
            this.loading = false
            this.total = res.total
            this.dataRows = res.rows ||[]
        },
        async userSelectQueryUserType(){
            let res = await this.API.userSelectQueryUserType({
                userId:localStorage.getItem('userId')
            })
            this.userTypeNameList = res
        },
        query(){
            this.current = 1
            this.userGetPage()
        },
        returnUserTypeName(val){
            let code = ''
            this.dictionaryBatch.USER_TYPE.forEach(item =>{
                if(item.value == val){
                    code = item.code
                }
            })
            return code
        },
        async getDictionaryBatch(){
            let res = await this.API.getDictionaryBatch({
                dictCodes:'isUse,USER_TYPE',
                lang:localStorage.getItem('lan')
            })
            this.dictionaryBatch = res
            this.userGetPage()
        },
        returnFlag(val){
            let code = ''
            this.dictionaryBatch['isUse'].forEach(item =>{
                if(item.value == val){
                    code = item.code
                }
            })
            return code
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.userGetPage()
        },
        handleCurrentChange(val) {
          this.current = val
          this.userGetPage()
        },
    },
};
</script>

<style  lang="less" scoped>
    .password-main-box{
        .flex-x-sub-box{
            display: flex;
        }
    }
</style>
